﻿<template>
  <div class="Adventure_core">
    <input type="file" class="=file" style="display:none" ref="file"  multiple="multiple" />
    <div class="Adventure_header">
      <input tyep="text" placeholder="输入标题" class="input_title" ref ="title_input"/>
    </div>
    <div class="Adventure_get_img" ref="img_wrapper" style="height: 90.6vw;">
      <!-- tips s -->
      <!--<img src="../../static/img/adventure_img.jpg"-->
           <!--alt="alternate text" class="adventure_get_img_tips"-->
           <!--v-show="img_tips" v-on:click="get_img"/>-->
      <div v-show="img_tips" v-on:click="get_img">
        <p class="img_tips_w">
          请把你觉得美好或赞的东西当成礼物<br/>
        赠送给将为你冒险的人。<br/>
        例如：觉得好听的音乐<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;觉得好看的电影<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特别好看的图片
        </p>
        <img src="../../../static/img/white_add_img.jpg" alt="" class="img_tips_img">
      </div>
      <!-- tips e -->

      <!-- swiper s -->
      <mt-swipe :auto="4000" v-show="swipe_show" class="swipe">
        <mt-swipe-item class="slide1" v-for="(list,index) in img_list">
          <!-- 添加图片按钮 s-->
          <div class="add_img"  v-if="!list.w && !list.tips" v-on:click.self="get_img"> + </div>
          <!-- 添加图片按钮 e-->

          <!-- 删除图片按钮 s -->
          <div class="remove_img" v-if="!list.w && !list.tips" v-on:click.self="img_self_remove"> - </div>
          <!-- 删除图片按钮 e -->

          <img v-bind:src="list.img" style="width:70.6vw;" v-if="!list.w && !list.tips" v-on:click="show_max(list.img)"/>

          <div v-if="list.w" class="swiper_w" v-html="w_value">
            {{w_value}}
          </div>
          <img src="../../../static/img/adventure_img.jpg"
               alt="alternate text" class="adventure_get_img_tips"
               v-if="list.tips" v-on:click="get_img" />
        </mt-swipe-item>
      </mt-swipe>
      <!-- swiper e -->

    </div>
    <div class="Adventure_get_music">
      <img src="../../../static/img/tuwen.jpg" class="wenpng" v-on:click="wenpng_click"/>
      <div class="Adventure_music_line" v-on:click="show_music">
        添加语音说明
      </div>
      <!--<div class="Adventure_music_btn"></div>-->
      <img src="../../../static/img/music_player_icon.png" class="Adventure_music_btn" />
    </div>
    <div class="Adventure_bottom">
         <div class="ad_bottom_top">
              <input type="text" placeholder="时间"/>
              <input type="text" placeholder="人数">
         </div>
         <input type="text" placeholder="地址" class="dizhi">
         <input type="text" placeholder="其他说明" class="other_s">
    </div>

    <!-- wenpng_click s -->
    <div class="wenpng_click_mask" v-show="false" v-on:click.self="wenpng_click_mask_h"  placeholder="请输入文字">
       <textarea ref ="wen_c">
         {{w_value}}
       </textarea>
       <div class="certain_w" v-on:click="certain_btn_w">
          确认
       </div>
    </div>
    <!-- wenpng_click e -->

    <!-- new w input s-->
    <div class="new_input_w" v-show="wenpng_click_d">
      <input type="text" name="name" value="" placeholder="标题" class="input_title" ref ="title"/>
      <textarea class="text_a_input" placeholder="输入文字"  ref ="wen_c">
          {{w_value}}
      </textarea>
      <img src="../../../static/img/ad_input_succ.jpg" class="input_s_btn" v-on:click="certain_btn_w">
    </div>
    <!-- new w input e -->

    <!--bottom btn s-->
    <div class="bottom_btn clearfix">
      <div class="bottom_btn_base xinsmos" v-on:click="new_no">
        新手模式
      </div>
      <div class="bottom_btn_base">
        保存
      </div>
      <div class="bottom_btn_base">
        发布
      </div>
    </div>
    <!-- bottom btn e-->
    <scroll_ful v-show="scroll_ful_data"></scroll_ful>
  </div>
</template>

<script>
  import '../../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import { Toast, Indicator, MessageBox, Swipe, SwipeItem  } from 'mint-ui';
  import qs from 'qs';
  //import  "../../static/css/Adventure/Adventure.css"
  import Vue from "vue";
  import axios from 'axios'
  import filter from "../../filter/filter.js"
  import common from "../../common/common.js"
  import scroll_ful from "../scroll_full.vue"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  Vue.prototype.$http = axios;
  Vue.use(MintUI);
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        show_music_t: false,
        img_tips: true,
        img_list: [],
        img_src: "www",
        swipe_show:false,
        file_plus_flag: false,
        q_list: [],
        wenpng_click_d: false,
        w_value: "",
        swiper_tips_index: null,
        _has_img: false,
        _has_w:false,
        e_files: "",
        list_img: [],
        scroll_ful_data:false,
        voice_exist:{url:false,flag:false}
      }
    },
    props: ["music_show", "img_max_show", "show_q", "q_data","up_load_id"],
    beforeCreate: function () {

    },
    directives: {
      change: {
        // 指令的定义
        inserted: function (el) {

        }
      }
    },
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      q_data: function () {
        console.log("watch");
        console.log("start");
        console.log( this.q_data)
        this.$refs.text_area.value = this.q_data;
      }
    },
    methods: {
      new_no:function(){
        this.$store.dispatch("thom_redirect",
          { name: "/beginner_m_wrapper/bg_get_img", router: this.$router });
      },
      ertain_btn: function () {
       let id = location.search.split("user_id=")[1];
       let formData = new FormData();

       let gid = sessionStorage.getItem("gid", gid);
       let cid = sessionStorage.getItem("cid", cid);
       let input_img = this.$refs.file.files[0];

       if (this.$refs.title_input.value == "" || this.$refs.title_input.value != null || this.$refs.title_input.value != undefined) {
         formData.append("title", this.$refs.title_input.value);
       }

       if (this.w_value == "" || this.w_value != null || this.w_value != undefined) {
         formData.append("content", this.w_value);
       }

       formData.append('user.id', id);
       if (input_img == null || input_img == "" || input_img == undefined) {
         alert(input_img)
         formData.append('my', input_img);
       }

       //console.log(input_img)
       //formData.append('images', this.list_img);

       //data.append('file[]', this.files[i]);
       let files = this.$refs.file.files;
       for (let x = 0; x < files.length; x++) {
         formData.append('images', files[x]);
       }
       formData.append('images', this.list_img);

       if (this.up_load_id != undefined || this.up_load_id != null) {
          formData.append("voice", this.up_load_id)
       }

      if (this.q_data != null || this.q_data != undefined) {
          formData.append("trialQuestion", this.q_data)
      }

        formData.append("cover.id", cid)
        formData.append("groupAndCover.id", gid)

        //添加冒险卡
        let base_url = common.get_base_url();
        Indicator.open();

        //this.$http.post('/file/dataInpute',
        //  formData
        //)
        //  .catch((thrown) => {
        //    Indicator.close()
        //    alert(thrown);
        //    Toast({
        //      message: '网络出错',
        //      position: 'bottom',
        //      duration: 2000
        //    });
        //  }).then((e) => {
        //    Indicator.close();
        //    alert(e.data);
        //    //记录id
        //    //this.qs_list = e.data
        //  })

        this.$http.post( '/yizhiweimen/api/user/personalHomepage/addAdventureCard',
          formData
          )
          .catch((thrown) => {
            Indicator.close()
            alert(thrown);
            Toast({
              message: '网络出错',
              position: 'bottom',
              duration: 2000
            });
          }).then((e) => {
            Indicator.close();
            alert(e.data);
            //记录id
            //this.qs_list = e.data
          })
      },
      img_self_remove: function (index) {
        let len = this.img_list.length;
        this.img_list.splice(index, 1);//显示用的数组
        this.list_img.splice(index, 1)//上传用的数组

        this.$refs.file.value = null;//初始化 input 的 value 值
        if (this.img_list.length == 0) {//没有图 和 文字
          this.swipe_show = false;
          this.img_tips = true;
        } else if (this.img_list.length == 1 && (!!this.img_list[0] ? true : false)) {//有一个 但是 是文字
          this.img_list.push({ tips: true, w: false });//swiper 添加 tips
          this.swiper_tips_index = 1
        }
      },
      wenpng_click_mask_h: function () {
        this.wenpng_click_d = false
      },
      wenpng_click: function () {
        this.wenpng_click_d = !this.wenpng_click_d;

      },
      q_q: function () {
        //显示问题参考
        this.$emit("show_q");
      },
      get_img: function () {
        this.$refs.file.click();
      },
      show_music: function () {
        this.$emit("music_show")
      },
      show_max: function (img) {
        //图片全屏
        //this.$emit("img_max_show", img);
        //this.$refs.show_max_img.src = img
        this.$store.commit("set_ad_img_list", this.img_list);
        //this.$store.dispatch("thom_redirect",
        //  { name: "/scroll_full", router: this.$router });
        //this.scroll_ful_data = true;
        this.$emit("scroll_ful_data_f");
      },
      //文字确认按钮
      certain_btn_w: function () {
        let x = 0
        let title = this.$refs.title.value;
        this.wenpng_click_d = false;
        this.w_value = '<div style="margin-top:3vw"></div>' + title + '</br>' +"<div style='margin-bottom:3vw'></div>" +this.$refs.wen_c.value ;
        if(!this._has_w){
          this._has_w = true;
          this.img_list.push({ w: true, tips: false,w_value: w_value})
        };//swiper 添加 文字
        if (!this._has_img) {
          this._has_img = true;
          this.img_list.push({ tips: true, w: false });
        }//swiper 添加 tips

        let Len = this.img_list.length;

        for (; x < Len; x++) {
          if (this.img_list[x].tips == true) {
            this.swiper_tips_index  = x
          }
        }
        this.swipe_show = true;
        this.img_tips = false
      }
    },
    mounted: function () {
      Indicator.close();
      //初始化 如果 vuex 有bm_list 就显示
      let bm_list = this.$store.getters.get_B_M;
      console.log("bm_list___");
      console.log(bm_list);
      if(!!bm_list.finish){
        if(!!bm_list.voice){//是否有 voice
           this.voice_exist  =  {flag:true,url:bm_list.voice};
           console.log("voice_exist");
           console.log(this.voice_exist);
        }
        this.$emit("qes_data_change", bm_list.commit);
        this.q_data = bm_list.commit;//评论
        this.$refs.title_input.value = bm_list.title;//title
        this.img_list.push({ img: bm_list.img, plus: false ,w:false,tips:false});
        this.img_tips = false;//提示？？
        this.swipe_show = true;//swiper 显示
      }
      this.$nextTick(() => {
        //图片添加
        let _this = this; // 下面的 this 是 input 指向input的
        this.$refs.file.addEventListener("change", (e)=> {
          //promise s
          let count = 0;
          let result = this.$refs.file.files;
          //console.log(this.$refs.file.value.files);

          //console.log(this.$refs.file.files);

          // this.list_img = this.$refs.file.files[0]//提交用的图片数组

          let now_list_length = this.list_img.length;
          this.list_img = this.$refs.file.files;
          this.list_img = [];
          let file;
          let x = [];
          let files = this.$refs.file.files;
          for (let i = 0; i < files.length; i++) {

            // 取得一个文件
            file = files.item(i);
            // 这样也行
            file = files[i];
            // 取得文件名
            //alert(file.name);
            this.list_img.push(files[i])
          }

          let promise = new Promise((resolve, reject) => {
            let Len = e.srcElement.files.length,
                tips_index = _this.swiper_tips_index;
            if (e.srcElement.files.length > 6) {
              Toast({
                message: '图像张数不能大于6张',
                position: 'bottom',
                duration: 2000
              });
              return;
            }

            this.e_files = e.srcElement.files;

            for (let x = 0; x < Len; x++) {
             let  reader = new FileReader();
             reader.readAsDataURL(result[x]);
             let _e = e;

              //swiper_tips remove
             if (_this.swiper_tips_index != null) {
               _this.img_list.splice(tips_index, 1);
               _this.swiper_tips_index = null;
             }

             reader.onload = (e) => {
                this._has_img = true;
                this.img_list.push({ img: e.target.result, plus: false ,w:false,tips:false});
                  resolve("11");
                }
             }
          });

          promise.then((value) => {
            this.img_tips = false;
            // success
            _this.swipe_show = true;
          },(value)=>{
            // failure
          });
        })
      })

    },
    components: {
      scroll_ful
    }
  }
</script>
<style scoped lang="scss">
@import "../sass/ad_core.scss";
@import "./sass/input_limit_card.scss";
</style>
